<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <my-ul2></my-ul2>
    <my-ul></my-ul>
    <my-ul></my-ul>
  </div>  

 


  <template id="box">
    <!-- <template>只能有一个子元素 -->
      <!-- 每个组件文件中的根template，
        也就是最外层的template只能有一个子元素。
        非根template没有限制 -->
      <div>
        1111111
        <span> -- {{msg}} ---</span>
      </div>
      <span>
        222222
      </span>
  </template>
  <script>
      //vue 全局组件 Vue.component(组件名称，配置项)
    // Vue.component("my-ul", {

    //   template:'<div><ul><li>{{msg}}</li><li>123</li><li>456</li></ul></div>',
    //   //在组件种 data需要写成一个函数
    //   data() {
    //     return {
    //       msg:'消息'
    //     }
    //   },
    // })
        //    new Vue({
        //       el:'#app'
        //     })




    //分开来写
      const Com = {
        //此时将  <template id="box">结构当作上一种写法的引号后面的结构 通过id 传进去
        template:'#box',
          
        data() {
          return {
            msg:'消息2'
          }
        },
      }

      Vue.component("my-ul2",Com)

    new Vue({
      el:'#app'
    })

  </script>
</body>
</html>